<template>
	<el-form :model="form" :rules="rules" ref='theForm'>
		<el-form-item label="题干：" :label-width="labelwidth" prop="question">
			<div class="form_textarea small_input">
				<editor-more :content='form.question' @change="((data)=>{contentChange(data,'question')})"></editor-more>
			</div>
			<div class="form_textbtn">
				<!--<el-button type='primary' @click="contentChange({html:''},'question')" size='small'>清空</el-button>-->
			</div>
		</el-form-item>
		<el-form-item label="分数：" :label-width="labelwidth" prop="score" v-if='getScore'>
			<el-col :span="22">
				<el-input-number v-model="form.score" :min='0' :step="1" step-strictly label="请输入分数" ></el-input-number>
			</el-col>
		</el-form-item>
		<el-form-item label="选项：" :label-width="labelwidth" prop="options">
			<div class="clearfix" v-for="(item,index) in form.optionsArr">
				<div class="form_textarea small_input">
					<el-form-item :label="letters[index]+'、'" :label-width="'30px'">
						<editor-more :content='item' @change="((data)=>{optionChange(data,index)})"></editor-more>
					</el-form-item>
				</div>
				<div class="form_textbtn">
					<el-button type='danger' @click="optionDelete(index)" v-if="form.optionsArr && form.optionsArr.length>3" size='small'>删除</el-button>
					<!--<br />
					<br />
					<el-button type='primary' @click="optionChange({html:''},index)" size='small'>清空</el-button>-->
					<!--<el-button type='primary' @click="optionAdd()" v-if="form.optionsArr.length-1 == index" size='small'>添加选项</el-button>-->
				</div>
			</div>
			<div class="clearfix">
				<div class="form_textbtn">
					<el-button type='primary' @click="optionAdd()" size='small' :disabled='this.form.optionsArr.length>=10'>添加选项</el-button>
				</div>
			</div>
		</el-form-item>
		<el-form-item label="答案：" :label-width="labelwidth" prop="answer">
			<el-checkbox-group v-model="form.answers" @change='answerChange'>
				<el-checkbox :label="letters[index]" v-for='(item,index) in form.optionsArr'>{{letters[index]}}</el-checkbox>
			</el-checkbox-group>
		</el-form-item>
		<el-form-item label="解析:" :label-width="labelwidth" prop="analysis">
			<div class="form_textarea small_input">
				<editor-more :content='form.analysis' @change="((data)=>{contentChange(data,'analysis')})"></editor-more>
			</div>
			<div class="form_textbtn">
				<!--<el-button type='primary' @click="contentChange({html:''},'analysis')" size='small'>清空</el-button>-->
			</div>
		</el-form-item>
	</el-form>
</template>

<script>
	import EditorMore from "@/components/Editor/index.vue";
	export default {
		components: {
			EditorMore
		},
		props: {
			form: {
				type: Object,
				required: true,
				default: () => ({})
			},
			getScore: {
				type: Boolean,
				required: false,
				default: false
			},
		},
		data() {
			return {
				labelwidth: '110px',
				rules: {
					question: [{
						required: true,
						message: '请输入题干'
					}, {
						min: 0,
						max: 1000,
						message: "最多输入1000字",
						trigger: "blur",
					}],
					options: [{
						required: true,
						message: '选项不能为空'
					}],
					answer: [{
						required: true,
						message: '请填写答案'
					}],
					score: [{
						required: true,
						message: '请输入分数'
					}],
				},
				letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			}
		},
		created() {
			this.jsonObject();
		},
		methods: {
			jsonObject() {
				var form = this.form;
				if(form.options) {
					var optionObject = JSON.parse(form.options);
					this.form.optionsArr = Object.values(optionObject);
				} else {
					this.form.optionsArr = ['', '', '', ''];
				}
				this.form.answers = form.answer ? form.answer.split('') : [];
				this.form.score = form.score ? form.score : 0;
			},
			answerChange() {
				var answers = this.form.answers;
				if(answers && answers.length > 0) {
					answers = answers.sort()
					this.form.answer = answers.join('')
				} else {
					this.form.answer = ''
				}
			},
			optionAdd() {
				if(this.form.optionsArr.length<10){
					this.form.optionsArr.push('');
					this.setOption();
				}
			},
			optionDelete(index) {
				this.form.optionsArr.splice(index, 1);
				var delIndex = this.form.answers.indexOf(this.letters[index]);
				if(delIndex > -1) {
					this.form.answers.splice(delIndex, 1);
					this.answerChange()
				}
				this.setOption();
			},
			optionChange(data, index) {
				this.$set(this.form.optionsArr, index, data.html);
				this.setOption();
			},
			setOption() {
				var flag = this.form.optionsArr.filter(item => {
					return !item
				})
				if(flag.length > 0) {
					this.form.options = ''
				} else {
					var optionsObj = {};
					this.form.optionsArr.map((item, index) => {
						optionsObj[this.letters[index]] = item;
					})
					this.form.options = JSON.stringify(optionsObj)
				}
				this.$nextTick(() => {
					this.$refs.theForm.clearValidate()
				})
			},
			contentChange(data, label) {
				this.form[label] = data.html;
				this.$nextTick(() => {
					this.$refs.theForm.clearValidate()
				})
			},
			beforeSubmit() {
				return new Promise((resolve, reject) => {
					this.$refs.theForm.validate(valid => {
						if(!valid) {
							reject();
						} else {
							var thetopic = {
								question: this.form.question,
								options: this.form.options,
									answer: this.form.answer,
									score: this.form.score,
							}
							resolve(thetopic);
						}
					});
				});
			},
		}
	}
</script>